import { getServiceList } from "@/api/service";
import utils from "@/utils";
import { Button, Card, Space, Table, Typography } from "ant-design-vue";
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import RegisterForm from "./RegisterForm";

export default defineComponent({
  name: "services",
  setup() {
    const state = reactive({
      loading: false,
      columns: [
        {
          dataIndex: "id",
          title: "服务Id",
          customRender: (row: { text: string }) => {
            return (
              <>
                <Typography.Base copyable={true}>{row.text}</Typography.Base>
              </>
            );
          },
        },
        {
          dataIndex: "serverName",
          title: "服务名称",
        },
        {
          dataIndex: "parameter",
          title: "请求参数",
        },
        {
          dataIndex: "response",
          title: "响应",
        },
        {
          dataIndex: "url",
          title: "服务地址",
          customRender: (row: { text: string }) => {
            return (
              <>
                <Typography.Link>{row.text}</Typography.Link>
              </>
            );
          },
        },
        {
          dataIndex: "status",
          title: "健康状态",
          customRender: (row: { text: number }) => {
            return (
              <>
                {row.text == 0
                  ? "unknown"
                  : row.text == 1
                  ? "healthy"
                  : row.text == 2
                  ? "unhealthy"
                  : "offline"}
              </>
            );
          },
        },
        {
          dataIndex: "lastHealthyCheckTime",
          title: "最后检查时间",
          customRender: (row: { text: string }) => {
            return utils.dateFormat(row.text);
          },
        },
        {
          dataIndex: "description",
          title: "描述",
        },
        {
          dataIndex: "id",
          title: "操作",
          customRender: (row: { text: string }) => {
            return (
              <>
                <Typography.Link
                  onClick={() => {
                    registerFormRef.value.openModal("编辑服务", row.text);
                  }}
                >
                  编辑
                </Typography.Link>
              </>
            );
          },
        },
      ],
      data: [],
    });

    const registerFormRef = ref();

    const getList = () => {
      state.loading = true;
      getServiceList()
        .then((res: any) => {
          state.data = res.result;
        })
        .finally(() => {
          state.loading = false;
        });
    };

    onMounted(() => {
      getList();
    });

    return {
      ...toRefs(state),
      registerFormRef,
      getList,
    };
  },
  render() {
    return (
      <>
        <Card>
          <div style={{ marginBottom: "16px" }}>
            <Space>
              <Button
                type="primary"
                onClick={() => {
                  this.registerFormRef.openModal("服务注册");
                }}
              >
                注册服务
              </Button>
            </Space>
          </div>

          <Table
            rowKey="id"
            size="middle"
            loading={this.loading}
            columns={this.columns}
            dataSource={this.data}
            pagination={false}
          ></Table>
        </Card>

        <RegisterForm ref="registerFormRef" onSuccess={this.getList} />
      </>
    );
  },
});
